import React, { Component ,createRef} from 'react'
import { View, Text ,Image ,Input} from '@tarojs/components'
import Navbbar from '../../components/Navbbar'
import Iconcard from '../../components/Iconcard'
import './index.less'
import Taro from '@tarojs/taro'
import tools from '../../utils/tools'

export default class Search extends Component {
  state = {
    list:['茴香牛肉','可乐鸡翅'],
    historyList:[],
    inputValue:'',
  }
  componentDidMount(){
    this.setState({
      historyList: tools.tGet('historyList')||[]
    })
  }
  
  handleInput = (e)=>{
    this.setState({
      inputValue:e.detail.value
    })
  }
  handleSearch = ()=>{
    Taro.navigateTo({
      url:`../searchDetail/index?keyword=${this.state.inputValue}`
    })  
    if(tools.tGet('historyList'))
    {
      var arr = tools.tGet('historyList')
      arr.unshift(this.state.inputValue)
      tools.tSet('historyList',arr)
    }
    else{
      tools.tSet('historyList',[...this.state.inputValue])
    }
    this.setState({
      inputValue:'',
      historyList:tools.tGet('historyList')||[]
    })
  }
  handleDelete = ()=>{
    tools.tRemove('historyList')
    this.setState({
      historyList:tools.tGet('historyList')||[]
    })
  }
  handleHistory = (key)=>{
    Taro.navigateTo({
      url:`../searchDetail/index?keyword=${key}`
    })  
  }
  render() {
    return (
      <View className='history_hot_box'>
        <Navbbar type={4}></Navbbar>
        <View className='search_input_box'>
          <View className='search_input'>
            <View className='search_icon'></View>
            <Input placeholder='鸡腿' ref={this.myInput} onInput={(e)=>{this.handleInput(e)}} value={this.state.inputValue}></Input>
          </View>
          <View className='search_text' onClick={()=>this.handleSearch()}>搜索</View>
        </View>
        <View className='title'>
          搜索历史
          <View className='del' onClick={()=>this.handleDelete()}>
            清除记录
            <Image src='https://tpc666666.oss-cn-shanghai.aliyuncs.com/delete.png' className='del_img'></Image>
          </View>
        </View>
        <View className='history_hot'>
          {
            this.state.historyList.map((item,index)=>{return <Iconcard text={item} key={index} goto={this.handleHistory}></Iconcard>})
          }
        </View>
        <View className='hot'></View>
        <View className='title'>热门推荐</View>
        <View className='history_hot'>
          {
            this.state.list.map((item,index)=>{return <Iconcard text={item} type='hot' key={item+index}></Iconcard>})
          }
        </View>
        <View className='hot'></View>

      </View>
    )
  }
}
